<template>
  <Tabs v-model="currentTab" class="demo-tabs-style2">
    <TabPane label="竞赛成绩" name = "user">
      <search-table
        ref="searchTable"
        :columns="tableCol" 
        :data="tableData"
        :total="totalList"
        :page.sync="queryObj.pageIndex"
        :size.sync="queryObj.pageSize"
        @change-size="getQueryListPageSize"
        @change-page="getQueryListPage"
      >
        <template slot="search">
          <Select filterable v-model="queryListObj.userName"
                  style="width: 150px; margin-right:15px;" filterable
                  @on-change="searchQueryList" clearable
                  placeholder="请选择选手">
            <Option v-for="item in userList" :value="item.userName" :key="item.id" :title="item.userName">{{ item.userName }}</Option>
          </Select>
        </template>
        <Modal
          v-model="showModel"
          title="答题详情"
          :width="1200"
          :mask-closable = "false"
          footer-hide>
          <div class="flex-between">
            <Select filterable v-model="queryObjQuestion.answerRight" @on-change="queryAllQuestionAnswerRight"
                  clearable class="clearableSelect">
              <Option :value="1">正确</Option>
              <Option :value="0">错误</Option>
            </Select>
            <Page :total="total" show-total show-elevator :current="queryObjQuestion.page" :page-size="queryObjQuestion.rows"
              @on-page-size-change="queryAllQuestionSize"
              @on-change="queryAllQuestionPage" style="text-align: right"/>
          </div>
          <QuestionList :data="allQuestionList" pattern="answer" :showNoAnswer="true" :showScore="true" style="margin-top:20px"></QuestionList>
          <!-- <question-list :allQuestionList="allQuestionList" :totals = "total" :showPage = true
                         :showUserAnswer=true
                         :showParse=true
                         :show-search="true"
                         :showAnswerRight="true"
                         ref="questionList"
                         v-if="showModel"
                         :showScore="true"
                         @queryListPage="queryAllQuestionPage"
                         @queryListSize="queryAllQuestionSize">
            <template slot="searchInput">
              <Select filterable v-model="queryObjQuestion.answerRight" @on-change="queryAllQuestionAnswerRight"
                      clearable class="clearableSelect">
                <Option :value="1">正确</Option>
                <Option :value="0">错误</Option>
              </Select>
            </template>
          </question-list> -->
        </Modal>
      </search-table>
    </TabPane>
    <TabPane label="竞赛选手积分" name="ctfUserIntegral">
      <!--<Alert>提供的功能：提供参赛个人的有效积分排名，同时提供个人积分的计算和积分排名的导出。</Alert>-->
      <klgUserIntegral ref="integral" v-if="currentTab === 'ctfUserIntegral'"></klgUserIntegral>
    </TabPane>
  </Tabs>
</template>

<script>
  import encryption from '@/libs/encryption.js'
  import usally from '@/mixin/usally'
  import knowledgeModel from './knowledgeModel'
  import QuestionList from '@/components/question-list'
  import klgUserIntegral from '../competFiling/klgUserIntegral.vue'
  import {
    compitionlist,
    delcompetition,
  } from '@/api/competition'
 import {queryAllKnowLedgeQuestionByUser,staticRank,getSenceUserList} from '@/api/knowledgeCompet'
  import {mapGetters, mapMutations} from 'vuex'
  export default {
    name: 'mains',
    props:[],
    components: {
      QuestionList,
      knowledgeModel,
      klgUserIntegral
    },
    mixins:[usally],
    watch: {
        currentTab(val){
            switch (val) {
                case 'user': 
                    this.queryListObj.userName = ''
                    this.getQueryListPage(1)
                    break;
                case 'ctfUserIntegral': 
                    // this.$refs.integral.userIntegralOnChange(1)
                    break;
            }
        }
    },
    data() {
      let September = sessionStorage.getItem('November')
      September = JSON.parse(encryption.SelfUseDecrypt(September));
      return {
        currentTab: 'user',
        userList: [],
        USER_ID: September.userId,
        USER_Name: September.nickname,
        curUserId:'',
        totalList:0,
        queryObjQuestion:{
          page:1,
          rows:10,
          answerRight:''
        },
        allQuestionList:[],
        queryObj:{
          pageIndex:1,
          pageSize:10,
        },
        queryListObj:{

        },
        tableCol:[
          {
            title:'排名',
            key:'rank',
            width:160,
            placement:'top-left',
            order:2
          },
          {
            title:'选手名称',
            key:'userName',
            placement:'top-left',
            order:1,
            tooltip: true,
            width: 120
          },
          {
            title:'得分',
            key:'score',
            width:160
          },
          {
            title:'完成题目数',
            key:'finish',
            width:160
          },
          {
            title:'答对题目数',
            key:'right',
            width:160
          },
          {
            title:'总题目数',
            key:'total',
            width:160
          },
          {
            title:'用时',
            key:'time',
            width:160,
            ellipsis: true,
            tooltip: true,
              render: (h, params) => {
                return h('span', {
                style: {
                  marginRight: '5px',
                  color: 'red',
                },
              },  !params.row.time ? '' : this.toSeconds(params.row.time))
              },
          },
          {
            title:'开始答题时间',
            key:'submitDate',
            tooltip:true
          },
          {
            title:'操作',
            placement:'top-right',
            key:'action',
            opList:[{
              txt:'查看详情',
              disabled: (data) => data.status===1,
              on: {
                click: (data) => {
                  this.showAnswerDetail(data.userId)
                }
              }
            }],
//             render:(h,params)=>{
//               return h('div',{},[
//                 h('Button',{
//                   props: {
//                     type: 'text',
//                     size: 'small',
//                     disabled: params.row.status===1,
//                   },
//                   style: {
//                     border:'none',
// 					background:'none',
// 					boxShadow:'none',
//                   },
//                   on: {
//                     click: () => {
//                       this.showAnswerDetail(params.row.userId)
//                     }
//                   }
//                 },[
//                 	h('img', {
//                         attrs: {
//                             src: params.row.status===1 ? require('../../../assets/globalIcon/dis-check.png'):require('../../../assets/globalIcon/check.png'),
//                         },
//                         style: {
//                             cursor: 'pointer',
// //			                'margin-right':'5px',
//                             'vertical-align': 'middle',
// //			                width:'16px',
// //			                height:'auto',
//                             display:'inline-block',
//                             marginBottom:'4px',
//                         },
//                     }),
//                     h('span',{
//                         style: {
//                             cursor: 'pointer',
//                             color:params.row.status===1 ? '#c5c8ce':'#2d8cf0'
//                         },
//                     },'查看详情')
//                 ])
//               ])
//             }
          },

        ],
        tableData:[],
        total:0,
        showModel:false
      }
    },
    computed:{
      ...mapGetters('compet',['passParams'])
    },
    mounted() {
      this.init();
      this.getQueryList();
      this.getUserList()
    },
    beforeDestory(){

    },
    methods:{
      getUserList() {
        getSenceUserList({
          page:1,
          rows:2147483647,
          refId: this.passParams.id
        }).then(data=>{
          if(data.code==1){
            this.userList = data.attribute.dataList
          }else{
            this.userList = []
          }
        }).catch(error => {
          this.userList = []
        })
      },
      init(){
        if(this.passParams.page){
          this.queryObj.pageIndex = this.passParams.page;
        }
      },
      toSeconds(msd) {
        var time = parseFloat(msd) / 1000;   //先将毫秒转化成秒
        if (null != time && "" != time) {
            if (time > 60 && time < 60 * 60) {
                time = parseInt(time / 60.0) + "分钟" + parseInt((parseFloat(time / 60.0) -
                    parseInt(time / 60.0)) * 60) + "秒";
            }
            else if (time >= 60 * 60 && time < 60 * 60 * 24) {
                time = parseInt(time / 3600.0) + "小时" + parseInt((parseFloat(time / 3600.0) -
                    parseInt(time / 3600.0)) * 60) + "分钟" +
                    parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                    parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
            }
            else {
                time = parseInt(time) + "秒";
            }
        }
        return time;
      },
      getQueryList(){
        let params = {...this.queryObj,...this.filterObjEmpty(this.queryListObj)}
        staticRank(this.passParams.id,params).then(data => {
          if (data.code == 1) {
            this.tableData  = data.attribute.dataList;
            this.totalList = data.attribute.totalCount;
          }else{
            this.$Message.error(data.message)
          }
        })

      },
      showKnowLedgeCompetModel(passObj,type){
        if(type==='modify'){
          this.$refs.knowledgeModels.openModel(passObj.row)
        }else{
          this.$refs.knowledgeModels.openModel()
        }
      },
      searchQueryList(){
        this.getQueryListPage(1)
      },
      getQueryListPage(page){
        this.queryObj.pageIndex = page;
        this.getQueryList()
      },
      getQueryListPageSize(pageSize){
        this.queryObj.pageSize = pageSize
        this.getQueryList()
      },
      queryAllQuestionByUser(id){
        if(id){
          this.curUserId = id;
        }
        queryAllKnowLedgeQuestionByUser(this.passParams.id,this.curUserId,this.queryObjQuestion).then(data=>{
          if(data.code===1){
            this.allQuestionList = data.attribute.dataList;
            this.allQuestionList.forEach((ques) => {
              ques.answers = ques.keAnswerTOS.map(answer => {
                return {
                  ...answer,
                  answerId: answer.answerID
                }
              })
              ques.userAnswer = ques.userAnswers
              ques.name = ques.description
              ques.answerResult = ques.answerRight
            })
            // console.log(this.allQuestionList)
            this.total = data.attribute.totalCount
          }
        })
      },
      queryAllQuestionSize(size){
        this.queryObjQuestion.rows = size;
        this.queryAllQuestionByUser()
      },
      queryAllQuestionPage(page){
        this.queryObjQuestion.page = page;
        this.queryAllQuestionByUser()
      },
      showAnswerDetail(id){
        this.showModel = true;
        this.queryObjQuestion.page = 1
        this.queryObjQuestion.answerRight = ''
        this.userId = id
        this.queryAllQuestionByUser(id);
      },
      queryAllQuestionAnswerRight(){
        this.$refs.questionList.setPage(1)
        this.queryObjQuestion.page = 1
        this.queryAllQuestionByUser(this.userId)
      }
    }
  }
</script>

<style scoped>
  .expTable {
    width: 100%;
    margin-top: 20px;
  }

  .project-head-wrap {
    margin-top: 20px;
  }
  .clearableSelect {
    width: 150px;
    margin-right:15px;
  }
  .clearableSelect>>>.ivu-select-selection {
    border-radius:15px;
    border: 1px solid #cccccc!important;
    outline: 0;
  }
  .clearableSelect>>>.ivu-select-selection:hover {
    border: 1px solid rgb(56 , 56, 211)!important;
    box-shadow: 0px 0px 8px rgb(56 , 56, 211);
  }
  .clearableSelect>>>.ivu-select-selection:hover i {
    color: rgb(56 , 56, 211);
  }
</style>
<style>
  .expTable .ivu-poptip-body {
    text-align: left;
  }

  .expTable.ivu-table-wrapper {
    overflow: inherit;
  }

  .wide .ivu-transfer-list {
    width: 212px;
  }

  .expTable .ivu-poptip-body {
    text-align: left !important;
  }

  .scenesHeader {
    margin-bottom: 16px;
  }

  .expTable .ivu-table-fixed-body {
    overflow: inherit;
    z-index: auto;
  }
</style>
